<template>
  <!-- 图文组件 -->
  <!-- 组件类型: 1 -->
  <div class="vy-cmp-article">
    <div class="vy-cmp-article-container">
      <div class="vy-cmp-article-form">
        <a-form>
          <a-form-item>
            <!-- 富文本编辑器 -->
            <ckeditor
              :editor="editor"
              :config="editorConfig"
              v-model="formData.content"
            ></ckeditor>
          </a-form-item>
          <a-form-item class="vy-form-footer">
            <a-button type="primary" @click="click_save_info"
              >保存更改</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-vue2";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import zh from "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js";
import upload from "../../../../../public/upload";

const CMP_TYPE = 1; // 组件类型
export default {
  name: "vy-cmp-article",
  data() {
    return {
      //ck设置
      editor: ClassicEditor,
      editorConfig: {
        language: { ui: "zh-cn", content: "zh-cn" },
        axios: this.$axios,
        extraPlugins: [upload.MyCustomUploadAdapterPlugin],
      },
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        moduleType: CMP_TYPE,
        content: "", // 富文本内容
      },
    };
  },
  mounted() {
    const params = {
      moduleType: CMP_TYPE,
      projectId: this.projectId,
      moduleId: this.getModuleId(), // 主题Id
      id: this.formData.id || "",
    };
    this.$axios.get("/subassembly/getModuleRule", { params }).then((res) => {
      if (res.success) {
        this.$emit("card-rule-value", res.subassemblyVo.showContent);
      }
    });
  },
  components: {
    ckeditor: CKEditor.component,
  },
  methods: {
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    // 创建/更新内容组件
    saveInfo() {
      let params = Object.assign({}, this.formData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId(), // 主题Id
      });
      this.$axios.post("/subassembly/save", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-article {
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 100%);
  .vy-form-footer {
    text-align: center;
    margin-bottom: 0;
    .ant-btn {
      padding: 0 100px;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
        &[disabled] {
          background: #f5f5f5;
          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
  .ant-form-item-control .edui-default {
    line-height: 1.5;
  }
  .ck-editor__editable {
    height: 350px;
  }
}
</style>
